<template>
	<div class="commonNavContainer">
		<div class="navContainer">
			<div class="navleft">
				<img src="http://49.235.95.107/api/media/logo/logo2_runpolY.jpg" alt />
			</div>
			<div class="navmiddel">
				<div
					class="nav-item"
					:class="flag==index?'activeNav':''"
					v-for="(item, index) in navList"
					:key="index"
					@click="navrouter(item,index)"
				>
					<div class="nav-item-inner">
						<i :class="item.nav_icon.icon"></i>
						<span>{{item.nav_name}}</span>
					</div>
				</div>
			</div>
			<div class="navright">
				<el-avatar :src="avatar.avatar" icon="el-icon-user-solid"></el-avatar>
				<span>{{user_infos.username}}</span>
				<span @click="logout" class="logout">
					<i class="el-icon-circle-close"></i>
				</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			navList: [],
			user_infos: {},
			avatar: {}
		};
	},
	methods: {
		// 获取主菜单
		getBaseNav() {
			if (true) {
				this.$ajax
					.get("/nav")
					.then(res => {
						this.navList = res.data.results;
						window.localStorage.setItem(
							"basenav",
							JSON.stringify(res.data.results)
						);
					})
					.catch(err => {
						this.$message({
							message: "获取主菜单出错",
							type: "warning"
						});
					});
			} else {
				this.navList = base_list;
			}
		},
		// 获取用户头像
		get_avatar() {
			this.$ajax
				.get("/avatar")
				.then(res => {
					if (res.data.results.length > 0) {
						window.localStorage.setItem(
							"avatar",
							JSON.stringify(res.data.results)
						);
						this.avatar = res.data.results.pop();
					}
				})
				.catch(err => {
					// this.$message({
					// 	message: "获取用户头像出错",
					// 	type: "warning"
					// });
				});
		},
		// 导航路由
		navrouter(item, index) {
			if (index == 0) {
				this.$router.push({ name: "index" });
			} else if (index == 1) {
				this.$router.push({ name: "nav_two" });
			}else if (index == 2) {
				this.$router.push({ name: "nav_three" });
			}
		},
		// 退出登陆
		logout() {
			window.localStorage.removeItem("token");
			window.localStorage.removeItem("user");
			window.localStorage.removeItem("avatar");
			window.localStorage.removeItem("basenav");
			this.$router.push({ name: "login" });
			this.$message({
				message: "退出登陆成功！",
				type: "success"
			});
		}
	},
	mounted() {
		this.getBaseNav();
		this.get_avatar();
		// 为了防止未登录闯入
		let users = window.localStorage.getItem("user", null);
		if (users) {
			this.user_infos = JSON.parse(
				window.localStorage.getItem("user", "{}")
			);
		} else {
			this.$router.push({ name: "login" });
			this.$message({
				message: "请登陆！",
				type: "warning"
			});
		}
	},
	props: ["flag"]
};
</script>

<style lang="scss" scoped>
.commonNavContainer {
	width: 100%;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	background-color: white;
	position: fixed;
	top: 0;
	z-index: 999;
	.navContainer {
		display: flex;
		justify-content: space-between;
		.navleft {
			width: 255px;
			height: 60px;
			display: flex;
			justify-content: center;
			img {
				width: 90px;
				height: 100%;
			}
		}

		.navmiddel {
			width: 75%;
			display: flex;
			.nav-item {
				height: 100%;
				min-width: 120px;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				transition: all linear 0.5s;
				opacity: 0.8;
				cursor: pointer;
				.nav-item-inner {
					display: flex;
					justify-content: center;
					span {
						margin-left: 6px;
					}
					i {
						font-size: 19px;
						margin-top: 3px;
					}
				}
			}
			.nav-item:hover {
				font-size: 15px;
				color: white;
				background-color: yellowgreen;
				opacity: 1;
			}
		}

		.navright {
			width: 255px;
			display: flex;
			justify-content: center;
			.logout {
				padding-top: 5px;
				cursor: pointer;
			}
			.logout:hover {
				color: red;
			}
			.el-avatar {
				margin-top: 10px;
			}

			span {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 10px;
			}
		}
	}
}
.activeNav {
	font-size: 15px;
	color: white;
	background-color: yellowgreen;
	opacity: 1;
}
</style>